<template>
  <div class="relative">
    <header class="screen-header white align-center fs20">竹子买车可视化数字运营中心</header>
    <div class="screen-plan screen-plan-left screen-plan-lt">
      <div class="w120" id="screen-plan-lt"></div>
    </div>
    <div class="screen-plan screen-plan-left screen-plan-lc">
      <div class="w120" id="screen-plan-lc"></div>
    </div>
    <div class="screen-plan screen-plan-right screen-plan-rc">
      <div class="w120" id="screen-plan-rc"></div>
    </div>
    <div class="screen-plan screen-plan-right screen-plan-rt">
      <div class="w120" id="screen-plan-rt"></div>
    </div>
    <footer class="screen-footer-box">
      <div class="screen-footer screen-plan screen-plan-lb">
        <div class="w120" id="screen-plan-lb"></div>
      </div>
      <div class="screen-footer screen-plan screen-plan-rb">
        <div class="w120" id="screen-plan-rb"></div>
      </div>
    </footer>
    <Sphere></Sphere>
    <div class="bg-container overflow" :style="{ width: width, height: height }">
      <canvas id="screen-canvas"></canvas>
    </div>
    <div class="relative">
      <div id="filter" class="pointer" @click="handleShowFilter">
        <span>...</span>
      </div>
      <div v-if="filter" class="screen-time-box">
        <div class="block">
          <el-date-picker
            v-model="filterTime"
            type="month"
            placeholder="选择时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            @change="handleFilter"
          ></el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  option26,
  option27,
  option28,
  option29,
  option30,
  option31
} from "@/../config/Stats_options";
import {
  getMonthStartDate,
  getMonthEndDate,
  getNowTime,
  getFilterMonthLastDay
} from "@/utils/getCurrMonth";
import Sphere from "@/components/sphere";
export default {
  name: "screen",
  data() {
    return {
      filter: false,
      height: 0,
      width: 0,
      filterTime: "",
      xaxisTime: getNowTime(),
      time: [getMonthStartDate(), getMonthEndDate()],
      screenPlanLC: {
        visit: 0,
        sign: 0
      },
      screenPlanLC: {
        visit: 0,
        sign: 0
      },
      completeV: [],
      completeS: [],
      planV: [],
      planS: [],
      xAxis: [],
      timer: null
    };
  },
  mounted() {
    this.width = `${document.documentElement.clientWidth}px`;
    this.height = `${document.documentElement.clientHeight}px`;
    this.canvasBg(document.getElementById("screen-canvas"));
    this.init();
    this.timer = setInterval(() => {
      this.init();
    }, 1000 * 60 * 30);
  },
  methods: {
    handleShowFilter() {
      this.filter = !this.filter;
    },
    handleFilter() {
      const time = `${this.filterTime.split("-")[0]}-${
        this.filterTime.split("-")[1]
      }-${getFilterMonthLastDay(
        this.filterTime.split("-")[0],
        this.filterTime.split("-")[1]
      )}`;
      this.time = [];
      this.time.push(this.filterTime, time);
      this.xaxisTime = time;
      this.init();
    },
    init() {
      this.handleScreenPlanLT();
      this.handleScreenPlanLC();
      this.handleScreenPlanRC();
      this.handleScreenPlanRB();
      this.handleScreenPlanRT();
      this.getScreenDepts();
    },
    getScreenDepts() {
      this.xAxis = [];
      this.$axios
        .get("/api/screen/screenDepts")
        .then(data => {
          data.forEach(item => {
            this.xAxis.push(`${item.centerName}${item.deptName}`);
          });
        })
        .then(() => {
          this.handleScreenPlanLB();
        });
    },
    canvasBg(canvas) {
      let ctx = canvas.getContext("2d");
      let w = (canvas.width = window.innerWidth);
      let h = (canvas.height = window.innerHeight);
      let hue = 217;
      let stars = [];
      let count = 0;
      let maxStars = 2000; //星星数量

      let canvas2 = document.createElement("canvas");
      let ctx2 = canvas2.getContext("2d");
      canvas2.width = 100;
      canvas2.height = 100;
      let half = canvas2.width / 2;
      let gradient2 = ctx2.createRadialGradient(
        half,
        half,
        0,
        half,
        half,
        half
      );
      gradient2.addColorStop(0.025, "#CCC");
      gradient2.addColorStop(0.1, "hsl(" + hue + ", 61%, 33%)");
      gradient2.addColorStop(0.25, "hsl(" + hue + ", 64%, 6%)");
      gradient2.addColorStop(1, "transparent");

      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      // End cache

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          let hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        let max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //星星移动范围，值越大范围越小，
      }

      let Star = function() {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 8;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 200000;
        //星星移动速度
        this.alpha = random(2, 10) / 20;

        count++;
        stars[count] = this;
      };

      Star.prototype.draw = function() {
        let x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(
          canvas2,
          x - this.radius / 2,
          y - this.radius / 2,
          this.radius,
          this.radius
        );
        this.timePassed += this.speed;
      };

      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = "source-over";
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = "hsla(" + hue + ", 64%, 6%, 2)";
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = "lighter";

        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        }

        window.requestAnimationFrame(animation);
      }
      animation();
    },
    handleScreenPlanLT() {
      option26.series[0].data[0].value = 0;
      option26.series[0].data[1].value = 0;
      option26.series[1].data[0].value = 0;
      option26.series[1].data[1].value = 0;
      option26.series[1].data[2].value = 0;
      this.$axios
        .post("/api/screen/screenPlanLT", {
          from: this.time[0],
          to: this.time[1]
        })
        .then(data => {
          option26.series[0].data[0].value = data.visitPlan;
          option26.series[0].data[1].value = data.signPlan;
          option26.series[1].data[0].value = data.visit;
          option26.series[1].data[1].value = data.sign;
          option26.series[1].data[2].value = data.pick;
        })
        .then(() => {
          this.updateScreenPlanLT();
        });
    },
    handleScreenPlanLC() {
      option27.yAxis.data = [];
      option27.series[0].data = [];
      option27.series[1].data = [];
      this.$axios
        .post("/api/screen/screenPlanLC", {
          from: this.time[0],
          to: this.time[1]
        })
        .then(data => {
          option27.yAxis.data = data.name;
          option27.series[0].data = data.visits;
          option27.series[1].data = data.signs;
        })
        .then(() => {
          this.updateScreenPlanLC();
        });
    },
    handleScreenPlanRC() {
      option28.yAxis.data = [];
      option28.series[0].data = [];
      option28.series[1].data = [];
      this.$axios
        .post("/api/screen/screenPlanRC", {
          from: this.time[0],
          to: this.time[1]
        })
        .then(data => {
          option28.yAxis.data = data.yAxis;
          option28.series[0].data = data.ordertakings;
          option28.series[1].data = data.passs;
        })
        .then(() => {
          this.updateScreenPlanRC();
        });
    },
    handleScreenPlanRT() {
      option30.series[0].data = [];
      option30.series[1].data = [];
      option30.series[2].data = [];
      this.$axios
        .post("/api/screen/screenPlanRT", {
          from: this.time[0],
          to: this.time[1]
        })
        .then(data => {
          option30.legend.data = data.legend;
          option30.series[0].data = data.visits;
          option30.series[1].data = data.signs;
          option30.series[2].data = data.picks;
        })
        .then(() => {
          this.updateScreenPlanRT();
        });
    },
    handleScreenPlanRB() {
      option29.xAxis[0].data = [];
      option29.series[0].data = [];
      option29.series[1].data = [];
      option29.series[2].data = [];
      this.$axios
        .post("/api/screen/screenPlanRB", {
          from: this.time[0],
          to: this.time[1],
          filterTime: this.xaxisTime
        })
        .then(data => {
          option29.series[0].data = data.picks;
          option29.series[1].data = data.signs;
          option29.series[2].data = data.visits;
          option29.xAxis[0].data = data.xaxis;
        })
        .then(() => {
          this.updateScreenPlanRB();
        });
    },
    resetLB() {
      option31.xAxis[0].data = [];
      option31.series[0].data = [];
      option31.series[1].data = [];
      option31.series[2].data = [];
      option31.series[3].data = [];
      this.completeV = [];
      this.completeS = [];
      this.planV = [];
      this.planS = [];
    },
    handleScreenPlanLB() {
      this.resetLB();
      this.$axios
        .post("/api/screen/screenPlanLB", {
          from: this.time[0],
          to: this.time[1],
          xAxis: this.xAxis
        })
        .then(data => {
          option31.series[0].data = data.planV;
          option31.series[1].data = data.completeV;
          option31.series[2].data = data.planS;
          option31.series[3].data = data.completeS;
          option31.xAxis[0].data = data.xAxis;
        })
        .then(() => {
          this.updateScreenPlanLB();
        });
    },
    updateScreenPlanLT() {
      let screenPlanLT = this.$echarts.init(
        document.getElementById("screen-plan-lt")
      );
      screenPlanLT.setOption(option26, true);
    },
    updateScreenPlanLC() {
      let screenPlanLC = this.$echarts.init(
        document.getElementById("screen-plan-lc")
      );
      screenPlanLC.setOption(option27, true);
    },
    updateScreenPlanRC() {
      let screenPlanRC = this.$echarts.init(
        document.getElementById("screen-plan-rc")
      );
      screenPlanRC.setOption(option28, true);
    },
    updateScreenPlanRB() {
      let screenPlanRB = this.$echarts.init(
        document.getElementById("screen-plan-rb")
      );
      screenPlanRB.setOption(option29, true);
    },
    updateScreenPlanRT() {
      let screenPlanRT = this.$echarts.init(
        document.getElementById("screen-plan-rt")
      );
      screenPlanRT.setOption(option30, true);
    },
    updateScreenPlanLB() {
      let screenPlanLB = this.$echarts.init(
        document.getElementById("screen-plan-lb")
      );
      screenPlanLB.setOption(option31, true);
    }
  },
  components: {
    Sphere
  },
  beforDestoy() {
    clearInterval(this.timer);
  }
};
</script>
<style>
.screen-block {
  width: 0.2%;
  height: 4%;
  position: absolute;
  z-index: 111;
  top: 54%;
  left: 29%;
  border: 5px solid transparent;
  border-image-source: url("../../../static/images/block.png");
  border-image-slice: 60 87 27 36 fill;
  border-width: 47px 60px 32px 23px;
}
.screen-plan {
  width: 20%;
  height: 22%;
  position: absolute;
  z-index: 111;
}
.screen-plan-left {
  border: 5px solid transparent;
  border-image-source: url("../../../static/images/left.png");
  border-image-slice: 45 72 24 24 fill;
  border-width: 42px 65px 25px 25px;
}
.screen-plan-lt {
  top: 4%;
  left: 2%;
}
.screen-plan-lc {
  top: 37%;
  left: 2%;
}
.screen-plan-rc {
  top: 37%;
}
.screen-plan-rt {
  top: 4%;
}
.screen-plan-right {
  width: 30%;
  right: 2%;
  border: 5px solid transparent;
  border-image-source: url("../../../static/images/right.png");
  border-image-slice: 45 72 24 24 fill;
  border-width: 42px 65px 25px 25px;
}
.screen-footer-box {
  width: 96%;
  height: 26%;
  left: 2%;
  position: absolute;
  bottom: 3%;
}
.screen-footer {
  width: 44%;
  height: 75%;
  border: 5px solid transparent;
  border-image-source: url("../../../static/images/footer.png");
  border-image-slice: 45 72 24 24 fill;
  border-width: 42px 65px 25px 25px;
}
.screen-plan-lb {
  left: 0%;
}
.screen-plan-rb {
  right: 0%;
}
#filter {
  width: 1%;
  height: 2%;
  font-size: 1rem;
  line-height: 0.5rem;
  border: 2px solid;
  border-radius: 50%;
  text-align: center;
  opacity: 0.5;
  position: fixed;
  left: 1%;
  top: 1%;
  color: rgba(90, 93, 96, 1);
  transition: all 0.8;
  z-index: 99;
}
#filter:hover {
  transition: all 0.8;
  box-shadow: 1px 0px 6px #ffffff;
}
.w120 {
  width: 105%;
  top: -20%;
  height: 130%;
}
.screen-time-box {
  width: 6%;
  height: 2%;
  position: fixed;
  top: 1%;
  left: 3%;
}
#my-canvas {
  position: absolute;
  left: -45%;
  top: -40%;
}
</style>
